<script setup>
import { ref } from 'vue'
const activePath = ref(location.pathname)
</script>

<template>
  <el-container class="app-container">
    <el-header height="64px" class="app-header" v-reveal>
      <div class="brand">
        <span class="logo">浪浪山</span>
        <span class="slogan">小妖怪</span>
      </div>
      <el-menu
        :default-active="activePath"
        mode="horizontal"
        router
        background-color="transparent"
        class="app-menu"
      >
        <el-menu-item index="/">起点</el-menu-item>
        <el-menu-item index="/about">关于</el-menu-item>
        <el-menu-item index="/stills">剧照</el-menu-item>
        <el-menu-item index="/services">衍生</el-menu-item>
        <el-menu-item index="/contact">联系</el-menu-item>
      </el-menu>
    </el-header>

    <el-main class="app-main">
      <router-view v-slot="{ Component }">
        <transition name="page" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </el-main>
    <el-footer height="64px" class="app-footer">
      <div class="copyright">
        <span>
          &copy; 所有内容全都是照搬自原作品，如有侵权请联系123456
        </span>
      </div>
    </el-footer>
  </el-container>
</template>

<style scoped>
.app-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #fff7f0 0%, #fff1e6 100%);
  background: url('./assets/images/bg2.jpg') no-repeat center center;
  background-size: cover; /* 确保背景图覆盖整个容器 */
  position: relative; /* 为遮罩层提供定位上下文 */
}

/* 添加半透明遮罩层，减少背景对文字的干扰 */
.app-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7); /* 白色半透明遮罩 */
  z-index: 1; /* 确保遮罩层在背景图之上，文字之下 */
  pointer-events: none; /* 确保遮罩层不影响交互 */
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: saturate(180%) blur(8px); 
  border-bottom: 1px solid rgba(255, 153, 102, 0.25);
  position: relative; /* 确保文字在遮罩层之上 */
  z-index: 2;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.logo {
  font-size: 22px;
  font-weight: 800;
  color: var(--el-color-primary);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* 添加文字阴影 */
}

.slogan {
  font-size: 12px;
  color: #8a5a3a; /* 调整颜色，增加与背景的对比度 */
  font-weight: 500; /* 增加字重 */
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8); /* 添加白色文字阴影 */
}

/* 设置普通菜单项的颜色 */
.app-menu :deep(.el-menu-item) {
  color: #5d4037; /* 深棕色，增加对比度 */
}

.app-menu :deep(.el-menu-item.is-active) {
  color: var(--el-color-primary);
  font-weight: 600; /* 激活项增加字重 */
}

.app-main {
  padding: 0;
  position: relative; /* 确保内容在遮罩层之上 */
  z-index: 2;
}

.app-footer {
  text-align: center;
  color: #8a6b58;
  border-top: 1px solid rgba(255, 153, 102, 0.25);
  position: relative; /* 确保页脚文字在遮罩层之上 */
  z-index: 2;
}
</style>
